<template>
    <div class="fullScreen bg-c-wh">
        <m-header :msg="this.$store.state.bjpk10Tab" :close="'lottery'"></m-header>
        <div class="tx-s-14">
            <!-- 期数、倒计时、历史数据 -->
            <lot-overview :type="'bjpk10'"></lot-overview>
            <!-- 选择玩法列表 -->
            <div class="scroll-box">
                <div class="flex-box flex-pj list bor-b-g" v-for="(item, index) in selData" :key="index">
                    <div class="flex-box">
                        <div>
                            <div>北京赛车</div>
                            <div><span class="tx-c-b">{{ item.issue }}</span>期</div>
                        </div>
                        <div class="mar-l">
                            <div>{{ item.title }}-{{ item.name }}</div>
                            <div>@<span class="tx-c-r">{{ item.odds }}</span></div>
                        </div>
                    </div>
                    <div class="flex-box flex-ac lineh-3">
                        <div class="payPrice tx-c">{{ inputPrice }}</div>
                        <div>元</div>
                        <div class="pad-r" @click="deleteOpt(item)">
                            <div class="iconSize-1 icon_delet"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="lotteryFooter tx-s-14">
            <div class="flex-box flex-pj sum bor-b-g">
                <div class="wd-33">共{{ selData.length }}笔注单</div>
                <div class="wd-33 tx-c">合计：<span class="tx-c-r">￥{{ selData.length * inputPrice }}</span></div>
                <div class="wd-33"></div>
            </div>
            <div class="flex-box flex-pj">
                <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div> 
                <div class="flex-f1 tx-c tx-c-666 mar-foot" @click="showConfirm = true">一键修改投注金额</div>
                <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
            </div>
        </div>
        <!--  -->
        <div v-transfer-dom>
            <confirm v-model="showConfirm"
            show-input
            ref="confirm"
            :input-attrs="inputAttrs"
            :title="'请输入投注金额'"
            @on-confirm="onConfirm"
            @on-show="onShow">
            </confirm>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from "vuex"
import { TransferDom, Confirm } from 'vux'
import MHeader from "../../components/m-header"
import Description from "../../components/lottery/description"
import LotOverview from "../../components/lottery/lotOverview"
import { buyLottery } from '../../common/js/axiosUtil'
export default {
    data () {
        return { 
            selData : this.$route.query.selData, // 选中数据
            inputPrice : this.$route.query.inputPrice, // 投注金额
            showConfirm : false,
            inputAttrs : {
                type : 'number',
                // onkeyup : "this.value=this.value.replace(/^(0+)|[^\d]+/g,'')"
                onKeyUp : "this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"
            }
        }
    },
    directives: {
        TransferDom
    }, 
    methods: {
        // 删除数据
        deleteOpt (option) {
            // 查找取消项数据下标并清除数据
            for (var i = 0; i < this.selData.length; i++) {
                if (this.selData[i] == option) this.selData.splice(i, 1)
            }
        },
        // 重置，清空所有操作
        cancel () {
            this.inputPrice = this.$route.query.payPriceMin
        },
        // 一键修改投注金额 
        onConfirm (value) {
            this.$refs.confirm.setInputValue('')
            if(this.$route.query.payPriceMax < value) {
                this.$toast('投注金额至多为'+this.$route.query.payPriceMax+'元', 2000)
            }else{
                this.inputPrice = Number(value) 
            }
        },
        // 设置input默认值为当前投注金额
        onShow () {
            this.$refs.confirm.setInputValue(this.inputPrice)
        },
        // 确定
        confirm () { 
            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
            this.$vux.confirm.show({
                // 组件除show外的属性
                title: '支付确认',
                content: '共<span class="tx-c-r">'+ this.selData.length +'</span>笔订单，共<span class="tx-c-r">'+ this.selData.length * this.inputPrice +'</span>元',
                cancelText: '取消',
                confirmText: '确定',
                hideOnBlur: true,
                onCancel () {
                },
                onConfirm () {
                    _this.sendBuyLottery()
                }
            }) 
        },
        // 提交购彩
        sendBuyLottery () { 
            let lotteryTickets = []
            for(let i=0; i<this.selData.length; i++){
                let ticket = {
                    playType : this.selData[i].playType,
                    content : this.selData[i].content,
                    odds : this.selData[i].odds,
                    payPrice : this.inputPrice,
                    times : '1'
                }
                lotteryTickets.push(ticket)
            }
            this.$toast('加载中...', 1000000)
            let time = JSON.stringify(new Date().getTime())
            let token = this.md5(time + '4baea6bc1bd66a7e00aa778d4aca6720')
            let params = {
                timeStamp : time,
                token : token,
                uid : this.bfUserInfo.uid,
                lotteryType : 'bjpk10',
                issue : this.selData[0].issue,
                payPrice : this.selData.length * this.inputPrice,
                lotteryTickets : lotteryTickets,
                from : 'h5',
            }
            buyLottery(JSON.stringify(params))
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200"){
                    // this.$router.push('')
                } else {
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        }
    },
    components: {
        MHeader,
        Description,
        LotOverview,
        Confirm
    },
    computed: {
        ...mapGetters({
            bfUserInfo: "bfUserInfo"
        })
    }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .pad-lr
        padding : 0.75rem 0.5rem 
    .past-issue
        padding : .75rem 
    .scroll-box
        position : fixed 
        top : 7.5rem
        bottom : 5.875rem
        width : 96%
        line-height : 1.5rem
        margin : 0 2%
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display : none
    .list
        margin : 0 .5rem
        padding : .5rem 0
    .mar-l
        margin-left : 1.5rem
    .lineh-3
        line-height : 3rem
    .payPrice
        width : 4rem 
        margin-right : .5rem
        background : rgba(0, 0, 0, 0.1)
    .pad-r
        padding : 1rem .5rem 1rem 1rem
    .sum
        line-height : 2.5rem
        padding : 0 1rem
        color : #666
    .footer-btn
        padding : 0 1rem
        margin : 0.75rem 0 
    .mar-foot
        margin : 0.75rem 0
</style> 